<template>
	<view>
		<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
		<uni-popup ref="popup" :background-color="background" @change="change">
			<view class="popup-content" :style="{color:color}" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="topNav">
					<text>{{flag?'倒序':'顺序'}}</text>
				</view>
				<scroll-view :scroll-into-view="top" scroll-y="true" class="scroll-Y"
					:style="{height:height+'px'}">
					<view v-for="(item,index) in list" :id="'hbh'+(index+1)"
						:class="['scroll-view-item',process2==('hbh'+(index+1))?'light':'']" :key="index"
						@click="handleChapter(index)">
						<text>{{item.chapter_title}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getNovelList
	} from "@/api/index.js"
	export default {
		name: "bookList",
		// props: ["isShow", "book_id", "process", "list"],
		props:{
			process:{
				type:String,
				default:""
			},
			list:{
				type:Array,
				default:()=>{[]}
			},
			background:{
				type:String,
				default:'#fff'
			},
			color:{
				type:String,
				default:"#000"
			}
		},
		data() {
			return {
				type: 'left',
				pageSize: 100,
				pageNum: 1,
				show: false,
				height: 0,
				flag: false,
				top: 'hbh1',
				process2: this.process
			};
		},
		watch: {
			flag: {
				handler(newValue, oldValue) {
					this.$emit("changList",newValue)
					if (newValue) {
						this.top = 'hbh' + this.list.length
					} else {
						this.top = 'hbh1'
					}
					this.process2 = 'hbh' + (this.list.length + 1 - this.process2.split("hbh")[1])
				}
			}
		},
		mounted() {
			console.log(this.list)
			this.$refs.popup.open(this.type)
			this.top = this.process
			this.height = uni.getStorageSync("SystemHeight") - uni.getStorageSync("SET_STATUS_BAR") - 140
		},
		methods: {
			change(e) {
				this.show = e.show
				this.$emit("putStatus", e.show)
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			//触底加载
			lower(e) {
				console.log(e)
			},
			handleChapter(index) {
				if (this.flag) {
					this.$emit("changeChapter", this.list.length - 1 - index)
					this.process2 = 'hbh' + (this.list.length - 1 - index + 1)
				} else {
					this.$emit("changeChapter", index)
					this.process2 = 'hbh' + (index + 1)
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	// 滚动条样式
	/deep/ ::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: #ccc !important;
		-webkit-appearance: auto !important;
		display: block;
	}

	/deep/ ::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px !important;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
		background: #7b7979 !important;
	}

	/deep/ ::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
		// border-radius: 10px !important;
		background: #FFFFFF !important;
	}

	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.popup-content {
		@include flex;
		align-items: center;
		// justify-content: center;
		padding: 100rpx 0rpx 20rpx 0rpx;
		padding-top: var(--status-bar-height);
		padding-bottom: 200rpx;
		box-sizing: border-box;
		height: 50px;
		display: flex;
		flex-direction: column;

		.topNav {
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-right: 40rpx;
			box-sizing: border-box;
		}

		.scroll-Y {
			.scroll-view-item {
				height: 80rpx;
				border-bottom: 1rpx solid #ccc;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
			}

			.light {
				color: red
			}
		}
	}

	.popup-height {
		@include height;
		width: 500rpx;
	}
</style>